<template>
  <div class="handle-box">
    <el-button type="primary" @click="exportXlsx">导出Excel</el-button>
  </div>
  <el-table
    :data="tableData"
    border
    class="table"
    header-cell-class-name="table-header"
  >
    <el-table-column prop="id" label="ID" width="55" align="center" />
    <el-table-column prop="name" label="姓名" />
    <el-table-column prop="sno" label="学号" />
    <el-table-column prop="class" label="班级" />
    <el-table-column prop="age" label="年龄" />
    <el-table-column prop="sex" label="性别" />
  </el-table>
</template>

<script setup>
import * as XLSX from "xlsx";

const tableData = ref([]);
// 获取表格数据
const getData = () => {
  tableData.value = [
    {
      id: 1,
      name: "小明",
      sno: "S001",
      class: "一班",
      age: "10",
      sex: "男",
    },
    {
      id: 2,
      name: "小红",
      sno: "S002",
      class: "一班",
      age: "9",
      sex: "女",
    },
  ];
};
getData();

const list = [["序号", "姓名", "学号", "班级", "年龄", "性别"]];
// 导出Excel函数
const exportXlsx = () => {
  // 遍历表格数据，生导出列表
  tableData.value.map((item, i) => {
    const arr = [i + 1]; //序号
    arr.push(...[item.name, item.sno, item.class, item.age, item.sex]); //姓名、学号、班级、年龄、性别
    list.push(arr); //将当前行数据添加到导出列表中
  });
  // 将导出列表转换为工作表
  let WorkSheet = XLSX.utils.aoa_to_sheet(list);
  // 创建新的工作簿
  let new_workbook = XLSX.utils.book_new();
  // 将工作表添加到工作簿中
  XLSX.utils.book_append_sheet(new_workbook, WorkSheet, "第一页");
  // 将工作簿写入文件并下载
  XLSX.writeFile(new_workbook, `表格.xlsx`);
};
</script>

<style scoped lang="scss">
.handle-box {
  margin-bottom: 20px;
}

.handle-select {
  width: 120px;
}

.handle-input {
  width: 300px;
}
.table {
  width: 100%;
  font-size: 14px;
}
.red {
  color: #f56c6c;
}
.mr10 {
  margin-right: 10px;
}
.table-td-thumb {
  display: block;
  margin: auto;
  width: 40px;
  height: 40px;
}
</style>
